<template>
 <div class="banner">
     <van-swipe :autoplay="3000">
        <van-swipe-item v-for="item in list" :key="item.id">
            <img v-lazy="item.picUrl" />
        </van-swipe-item>
        </van-swipe>
        <ul>
            <li @click="$router.push('/Sigin')">
                <img src="../../assets/img/4.png" alt="">
                <span>签到</span>
            </li>
            <li>
                <img src="../../assets/img/1.png" alt="">
                <span>礼券</span>
            </li>
            <li @click="$router.push('/Seelist')">
                <img src="../../assets/img/3.png" alt="">
                <span>砍价</span>
            </li>
            <li @click="$router.push('/Special')">
                <img src="../../assets/img/2.png" alt="">
                <span>专栏</span>
            </li>
        </ul>
 </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
 
Vue.use(Lazyload);
export default {
  name: "",
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let { data: res } = await this.$http.get(
        "https://api.it120.cc/small4/banner/list"
      );
      this.list = res.data;
    }
  },
  computed: {},
  watch: {}
};
</script>

<style scoped>
.banner {
  position: relative;
}
.banner > ul {
  width: 100%;
  height: 75px;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  z-index: 999;
  background-color: white;
  border-radius: 20% 20% 0 0;
}
.banner > ul > li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.banner > ul > li > img {
  width: 42px;
  height: 42px;
}
.van-swipe-item > img {
  width: 100%;
  height: 375px;
}
</style>